<script setup>
import { onMounted } from "vue"

const props = defineProps({
  // 列表的下标
  index: {
    type: Number,
    default: 0
  },

  // 出现的速度
  speed: {
    type: Number,
    default: 100
  }
})

onMounted(() => {
  console.log(props.index)
})
</script>

<template>
  <div class="list-container gradientAnimation" :style="{ animationDelay: `${index * speed}ms` }">
    <slot></slot>
  </div>
</template>

<style scoped>
.gradientAnimation {
  animation-name: gradient;
  animation-duration: 0.85s;
  animation-fill-mode: forwards;
  opacity: 0;
}

/* 不带前缀的放到最后 */
@keyframes gradient {
  0% {
    opacity: 0;
    transform: translate(-100px, 0px);
  }

  100% {
    opacity: 1;
    transform: translate(0px, 0px);
  }
}
</style>